<template>
  <!--添加Spu实例的结构-->
  <div>
    <el-form ref="form" label-width="80px" :model="skuInfo">
      <!--SPU名称-->
      <el-form-item label="SPU名称">{{spuName}}</el-form-item>
      <!--sku名称-->
      <el-form-item label="sku名称">
        <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <!--价格-->
      <el-form-item label="价格(元)">
        <el-input placeholder="价格(元)" type="number" v-model="skuInfo.price"></el-input>
      </el-form-item>
      <!--重量-->
      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <!--规格描述-->
      <el-form-item label="规格描述">
        <el-input type="textarea" rows="4" placeholder="规格描述" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>
      <!--平台属性-->
      <el-form-item label="平台属性">
        <el-form ref="form" :inline="true" label-width="80px" >
          <el-form-item :label="attr.attrName" v-for="(attr,index) in attrInfoList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!--销售属性-->
      <el-form-item label="销售属性">
        <el-form :inline="true" ref="form"  label-width="80px">
          <el-form-item :label="sale.saleAttrName" v-for="(sale,index) in spuSaleAttrList" :key="sale.id">
            <el-select placeholder="请选择" v-model="sale.attrIdAndValueId">
              <el-option :label="saleValue.saleAttrValueName" :value="`${sale.id}:${saleValue.id}`" v-for="saleValue in sale.spuSaleAttrValueList"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!--图片列表-->
      <el-form-item label="图片列表">
        <el-table :data="spuImageList" style="width: 100%" border @selection-change="handleSelectionChange">>
          <el-table-column type="selection" prop="date" label="label" width="80"></el-table-column>
          <el-table-column prop="date" label="图片" width="width">
            <template slot-scope="{row,$index}">
              <img :src="row.imgUrl" alt="" style="height:100px;width:100px">
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="width"></el-table-column>
          <el-table-column prop="date" label="操作" width="width">
            <template slot-scope="{row,index}">
              <el-button type="primary" size="mini" v-if="row.isDefault===0" @click="changeDefault(row)">设为默认</el-button>
              <el-button size="mini" v-else>默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!--保存与取消-->
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SkuForm',
  data(){
    return{
      spuName:'hh',
      spuImageList:[],//图片
      spuSaleAttrList:[],//销售属性
      attrInfoList:[],//平台属性
      imgList:[],//收集图片 目前缺少isDefault字段 将来要整理
      skuInfo:{
        "category3Id": 0,
        "price": 0,
        "spuId": 0,
        "tmId": 0,
        "skuName": "",
        "skuDefaultImg": "",
        "skuDesc": "",
        "weight": "",
        "skuAttrValueList": [
          {
            "skuId": 0,
            "valueId": 0,
          }
        ],
        "skuImageList": [
          {
            // "id": 0,
            "imgName": "",
            "imgUrl": "",
            "isDefault": "",
            // "skuId": 0,
            "spuImgId": 0
          }
        ],
        "skuSaleAttrValueList": [
          {
            // "id": 0,
            "saleAttrId": 0,
            // "saleAttrName": "string",
            "saleAttrValueId": 0,
            // "saleAttrValueName": "string",
            // "skuId": 0,
            // "spuId": 0
          }
        ],
      }
    }
  },
  methods:{
    //获取skuForm的数据
    async getData(category1Id,category2Id,spu){
      this.spuName = spu.spuName
      //当时没数据 为了能顺利进行 假设:
      spu.id = 1
      this.spuId = 5707
      this.tmId = 1
      //获取图片
      let imgRes = await this.$API.spu.reqSpuImageList(spu.id)
      if (imgRes.code === 200){
        //为每个数据加上isDefault字段
        let list = imgRes.data
        list.forEach(item=>{
          item.isDefault = 0
        })
        this.spuImageList = list
      }
      //获取销售属性
      let saleRes = await this.$API.spu.reqSpuSaleAttrList(spu.id)
      if (saleRes.code === 200){
        this.spuSaleAttrList = saleRes.data
      }
      //获取平台属性信息
      let attrRes = await this.$API.spu.reqAttrInfoList(category1Id,category2Id,spu.category3Id)
      if (attrRes.code === 200){
        this.attrInfoList = attrRes.data
      }
    },
    //table表格复选框按钮的事件
    handleSelectionChange(params){
      //params:获取到选择的图片 但是缺少isDefault字段
      this.imgList = params
    },
    //设置默认按钮
    changeDefault(row){
      //将图片列表中的isDefault字段为0 点击的那张设置为1
      this.spuImageList.forEach(item=>{
        item.isDefault = 0
      })
      row.isDefault = 1
      //收集默认图片地址
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    //取消按钮
    cancel(){
      this.$emit('changeScenes',0)
      //清除数据
      Object.assign(this._data,this.$options.data())
    },
    //保存sku
    async save(){
      const {attrInfoList,skuInfo,spuSaleAttrList,imgList} = this
      //整理参数--平台属性--方式1
      // let attrArr = []
      // attrInfoList.forEach(item=>{
      //   if (item.attrIdAndValueId){
      //     const [attrId,valueId] = item.attrIdAndValueId.split(":")
      //     let attrObj = {attrId,valueId}
      //     attrArr.push(attrObj)
      //   }
      // })
      // skuInfo.skuAttrValueList = attrArr
      //整理参数--平台属性--方式2
      skuInfo.skuAttrValueList = attrInfoList.reduce((pre,current)=>{
        if (current.attrIdAndValueId) {
          const [attrId, valueId] = current.attrIdAndValueId.split(":")
          pre.push({attrId, valueId})
        }
        return pre //下一次循环pre为当前pre
      },[])//初始pre为空数组

      // 整理参数--销售属性
      skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((pre,current)=>{
        if (current.attrIdAndValueId) {
          const [saleAttrId, saleAttrValueId] = current.attrIdAndValueId.split(":")
          pre.push({saleAttrId, saleAttrValueId})
        }
        return pre
      },[])

      //整理图片
      skuInfo.skuImageList = imgList.map(item=>{
        return{
          imgName:item.imgName,
          imgUrl:item.imgUrl,
          isDefault:item.isDefault,
          spuImgId:item.id
        }
      })
      let res = await this.$API.spu.reqSaveSkuInfo(skuInfo)
      if (res.code===200){
        this.$message({type:'success',message:'成功'})
        this.$emit('changeScenes',0)
      }else{
        this.$message({type:'success',message:'失败'})
      }
    }
  }
}
</script>

<style scoped>

</style>
